<template>
  <view class="wraps">
    <view class="content">
      <view v-if="state.taskList && state.taskList.length > 0">
        <view
          v-if="
            state.type != 'uric_acid' &&
            state.type != 'blood_fat' &&
            state.type != 'liver_function' &&
            state.type != 'sleep' &&
            state.type != 'water' &&
            state.type != 'blood_ketone' &&
            state.type != 'blood_sugar'
          "
        >
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{ item.collectTime }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.dataSource }} </text>
              </view>
            </view>
            <view v-for="(item1, index1) in item.list" :key="index1">
              <view class="title" v-if="index1">
                <view class="time" />
                <view class="source">
                  <text class="ource_name"> 来源： </text>
                  <text class="ource_type"> {{ item.dataSource }} </text>
                </view>
              </view>
              <view class="item">
                <view class="top">
                  <text class="name"> {{ typeFun() }} </text>
                  <text class="postprandial" v-if="state.type == 'fbg'"
                    >{{ item1.fbg ? '空腹' : '餐后' }}
                  </text>
                  <!-- status red    yellow  orange  green -->
                  <text
                    :class="['status', item1.color ? item1.color : '']"
                    v-if="item1.normalFlagName"
                  >
                    {{ item1.normalFlagName }}
                  </text>
                  <text class="time">
                    {{
                      item1.collectTime
                        ? transformTimeTwo(
                            new Date(item1.collectTime.replace(/\-/g, '/')).getTime(),
                            'minutesTwo'
                          )
                        : ''
                    }}</text
                  >
                </view>
                <view class="min">
                  <view class="name" v-if="state.type == 'bmi'">
                    <view>
                      <text class="num"> {{ item1.bmi }}</text>
                      <text class="unit">kg/㎡</text>
                    </view>
                  </view>
                  <view class="name" v-if="state.type == 'whr'">
                    <view>
                      <text class="num"> {{ item1.whr }}</text>
                    </view>
                  </view>
                  <view class="name" style="justify-content: flex-start" v-if="state.type == 'sbp'">
                    <view>
                      <text class="num"> {{ item1.sbp }}/{{ item1.dbp }}</text>
                      <text class="unit">mmHg</text>
                    </view>
                    <view style="margin-left: 32rpx">
                      <text class="num">{{ item1.pulseRate }}</text>
                      <text class="unit">bpm</text>
                    </view>
                  </view>
                  <!-- <view class="name" v-if="state.type == 'sbp'">
                </view> -->
                  <view class="name" v-if="state.type == 'heart_rate'">
                    <view>
                      <text class="num">{{ item1.heartRate }}</text>
                      <text class="unit">次/分</text>
                    </view>
                  </view>
                  <view class="name" v-if="state.type == 'fbg'">
                    <view>
                      <text class="num">{{ item1.fbg ? item1.fbg : item1.pbg }}</text>
                      <text class="unit">mmol/L</text>
                    </view>
                  </view>
                  <view class="name" v-if="state.type == 'spo2'">
                    <view>
                      <text class="num">{{ item1.spo2 }}</text>
                      <text class="unit">%</text>
                    </view>
                  </view>
                  <!-- <view class="remark" @tap="remarkFun(item1)"> 备注 </view> -->
                </view>
                <view class="bottom" v-if="item1.remark">
                  <text class="remark">备注：</text>
                  <text class="remarkContent">
                    {{ item1.remark }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="state.type == 'sleep'">
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{
                item.collectTime ? parseTime(item.collectTime, '{y}-{m}-{d}') : ''
              }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.dataSource }} </text>
              </view>
            </view>
            <view class="item">
              <view class="top">
                <text class="name"> 睡眠 </text>
                <!-- status red    yellow  orange  green -->
                <text :class="['status', item.color ? item.color : '']" v-if="item.normalFlagName">
                  {{ item.normalFlagName }}
                </text>
                <!-- <text class="time">
                  {{
                    item.collectTime
                      ? transformTimeTwo(
                          new Date(item.collectTime.replace(/\-/g, '/')).getTime(),
                          'minutesTwo'
                        )
                      : ''
                  }}</text
                > -->
              </view>
              <view class="min">
                <view class="name" style="margin-bottom: 16rpx">
                  <text class="num" style="font-size: 28rpx; font-weight: 400; color: #222"
                    >睡眠时长</text
                  >
                  <text class="unit" style="font-size: 32rpx; font-weight: 600; color: #222">{{
                    getSleepTimes(item.paramValue.sleepDuration)
                  }}</text>
                </view>
                <view class="name">
                  <text class="num" style="font-size: 28rpx; font-weight: 400; color: #222">
                    入睡时间</text
                  >
                  <text class="unit" style="font-size: 32rpx; font-weight: 600; color: #222">{{
                    parseTime(item.paramValue.sleepTime, '{m}月{d}日 {h}:{i}')
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="state.type == 'water'">
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{
                item.collectTime ? parseTime(item.collectTime, '{y}-{m}-{d}') : ''
              }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.dataSource }} </text>
              </view>
            </view>
            <view class="item">
              <view class="top">
                <text class="name"> 饮水 </text>
                <!-- status red    yellow  orange  green -->
                <text :class="['status', item.color ? item.color : '']" v-if="item.normalFlagName">
                  {{ item.normalFlagName }}
                </text>
                <!-- <text class="time">
                  {{
                    item.collectTime
                      ? transformTimeTwo(
                          new Date(item.collectTime.replace(/\-/g, '/')).getTime(),
                          'minutesTwo'
                        )
                      : ''
                  }}
                  </text> -->
              </view>
              <view class="min">
                <view class="name">
                  <view>
                    <text class="num"> {{ item.paramValue }}</text>
                    <text class="unit">ml</text>
                  </view>
                  <view class="bottom">
                    <text class="remark" @tap="editWater(item)">编辑</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="state.type == 'blood_ketone'">
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{
                item.report.checkTime ? parseTime(item.report.checkTime, '{y}-{m}-{d}') : ''
              }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.report.reportSource }} </text>
              </view>
            </view>
            <view class="item">
              <view class="top">
                <text class="name"> 血酮 </text>
                <!-- status red    yellow  orange  green -->
                <text
                  :class="['status', item.report.color ? item.report.color : '']"
                  v-if="item.report.reportStatusDesc"
                >
                  {{ item.report.reportStatusDesc }}
                </text>
                <text class="time">
                  {{
                    item.report.checkTime
                      ? transformTimeTwo(
                          new Date(item.report.checkTime.replace(/\-/g, '/')).getTime(),
                          'minutesTwo'
                        )
                      : ''
                  }}</text
                >
              </view>
              <view class="min">
                <view class="name">
                  <view>
                    <text class="num"> {{ item.details[0].indicatorValue }}</text>
                    <text class="unit">mmol/L</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="state.type == 'blood_sugar'">
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{
                item.report.checkTime ? parseTime(item.report.checkTime, '{y}-{m}-{d}') : ''
              }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.report.reportSource }} </text>
              </view>
            </view>
            <view class="item">
              <view class="top">
                <text class="name"> 血糖 </text>
                <text class="food-type" v-if="item.details[0].indicatorName">
                  {{ item.details[0].indicatorName }}
                </text>
                <!-- status red    yellow  orange  green -->
                <text
                  :class="['status', item.report.color ? item.report.color : '']"
                  v-if="item.report.reportStatusDesc"
                >
                  {{ item.report.reportStatusDesc }}
                </text>
                <text class="time">
                  {{
                    item.report.checkTime
                      ? transformTimeTwo(
                          new Date(item.report.checkTime.replace(/\-/g, '/')).getTime(),
                          'minutesTwo'
                        )
                      : ''
                  }}</text
                >
              </view>
              <view class="min">
                <view class="name">
                  <view>
                    <text class="num"> {{ item.details[0].indicatorValue }}</text>
                    <text class="unit">mmol/L</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else-if="state.type == 'uric_acid'">
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{ parseTime(item.report.checkTime, '{y}-{m}-{d}') }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.report.reportSource }} </text>
              </view>
            </view>
            <view class="item">
              <view class="top">
                <text class="name"> 尿酸 </text>
                <!-- <text class="food-type" v-if="item.details[0].tag">
                  {{ item.details[0].tag }}
                </text> -->
                <!-- status red    yellow  orange  green -->
                <text
                  :class="['status', item.report.color ? item.report.color : '']"
                  v-if="item.report.reportStatusDesc"
                >
                  {{ item.report.reportStatusDesc }}
                </text>
                <text class="time">
                  {{
                    item.report.checkTime
                      ? transformTimeTwo(
                          new Date(item.report.checkTime.replace(/\-/g, '/')).getTime(),
                          'minutesTwo'
                        )
                      : ''
                  }}</text
                >
              </view>
              <view class="min">
                <view class="name">
                  <view>
                    <text class="num"> {{ item.details[0].indicatorValue }}</text>
                    <text class="unit">mmol/L</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="card" v-for="(item, index) in state.taskList" :key="index">
            <view class="title">
              <view class="time">{{
                item.report.checkTime ? parseTime(item.report.checkTime, '{y}-{m}-{d}') : ''
              }}</view>
              <view class="source">
                <text class="ource_name"> 来源： </text>
                <text class="ource_type"> {{ item.report.reportSource }} </text>
              </view>
            </view>
            <view class="item">
              <view class="top">
                <text class="name"> {{ state.type == 'blood_fat' ? '血脂' : '肝功能' }} </text>
                <!-- <text
                  :class="['status', item.report.color ? item.report.color : '']"
                  v-if="item1.indicatorStatus"
                >
                  {{ item.report.reportStatusDesc }}
                </text> -->
                <text class="time">
                  {{
                    item.report.checkTime
                      ? transformTimeTwo(
                          new Date(item.report.checkTime.replace(/\-/g, '/')).getTime(),
                          'minutesTwo'
                        )
                      : ''
                  }}</text
                >
              </view>
              <view
                class="min"
                style="margin-top: 16rpx"
                v-for="(item1, index1) in item.details"
                :key="index1"
              >
                <view class="name">
                  <text class="label"> {{ typeNewFun(item1.indicatorKey) }}</text>

                  <view class="new-labels">
                    <text class="num">{{ item1.indicatorValue }}</text>
                    <text class="unit">{{ matchUnit() }}</text>
                    <text :class="['status', item1.indicatorStatus == 'N' ? 'green' : 'red']">
                      {{ item1.indicatorStatus == 'N' ? '正常' : '异常' }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="nodate" v-else>
        <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
        <view class="nodate_text">
          <text class="name">暂无数据</text>
        </view>
      </view>
    </view>

    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :key="waterShowIndex"
        :show="waterShow"
        :closeable="true"
        mode="bottom"
        @close="close"
        :custom-style="{ 'max-height': '98vh', overflow: 'auto' }"
        :round="16"
      >
        <view class="popup-wrap">
          <view class="title"> 饮水录入 </view>
          <view class="tabKey">
            <view v-if="state.tabkeyboardShow">
              <view class="keyboard" @tap="measuremenKey('keyboard')">
                <text type="" class="iconfont icon-jianpan1 img" />
                <text class="key">切换键盘</text>
              </view>
            </view>
            <view v-else>
              <view class="keyboard" @tap="measuremenKey('slideRule')">
                <text type="" class="iconfont icon-huachi1 img" />
                <text class="key">切换滑尺</text>
              </view>
            </view>
          </view>

          <view class="scoring" v-if="state.slideRuleShow">
            <slideRule :key="waterShowIndex" :message="message" @childEvent="childEvent" />
          </view>
          <view class="measure" v-else>
            <view class="numWrap cf">
              <view class="item">
                <input
                  v-model="measurementValue.height"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="5"
                />

                <view class="wraps">
                  <text class="name">饮水</text>
                  <text class="name">ml</text>
                </view>
              </view>
            </view>
          </view>
          <view class="measureTime">
            <text class="name">录入日期</text>
            <view class="time">
              <text class="titles">{{
                parseTime(editWaterData.collectTime, '{y}年{m}月{d}日')
              }}</text>
            </view>
          </view>
          <view class="fixedBtn" @tap="sure">
            <text class="name">提交</text>
          </view>
        </view>
      </up-popup>
    </view>

    <view @touchmove.stop.prevent="prevent">
      <up-popup :show="abnormalShow" :round="8" mode="center" @close="abnormalShow = false">
        <view class="abnormalContent">
          <view class="title"> 异常提醒 </view>
          <text class="content"> 您当天饮水量不足，请及时补充 </text>
          <view class="know" @tap="abnormalClose">知道了</view>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, computed, ref, watch } from 'vue'
import { healthInfoMapList, healthInfoUpdate } from '@/api/hmm'
import { transformTimeTwo } from '@/utils/hmm.ts'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getNewDetail, getWaterSleepDetail } from './healthPortrait.api'
import { parseTime } from '@/utils/tools'
import slideRule from './components/slideRule'
import { saveNewIndicator } from './healthPortrait.api'
const state = reactive({
  type: '',
  filtrate: {
    //请求参数
    size: 10, // 条数
    num: 1 // 页数
  },
  taskList: [], //数据
  show: false,
  inputValue: '',
  maxNum: 100, //最多输入字数
  getObj: {},
  slideRuleType: '',
  slideRuleTypeDefault: false,
  tabkeyboardShow: true,
  slideRuleShow: true
})
const abnormalShow = ref<boolean>(false)
const waterShow = ref<boolean>(false)
const waterShowIndex = ref<number>(0)
const inputLength = computed(() => {
  // 已输入的字数
  return state.inputValue ? (state.inputValue.length > 100 ? 100 : state.inputValue.length) : 0
})
const userInfo = ref<any>({})
const empi = ref<string>('')
const editWaterData = ref({
  id: 0,
  collectTime: '',
  dataSource: '',
  paramValue: '',
  paramKey: '',
  empi: ''
})

const message = ref({
  currentScore: 50,
  maxValue: 100,
  name: '',
  unit: ''
})
const measurementValue = ref({
  height: 0 //身高
})

onLoad((option: any) => {
  if (option.type) {
    if (option.type == 'blood_pressure') {
      state.type = 'sbp'
    } else if (option.type == 'heart') {
      state.type = 'heart_rate'
    } else if (option.type == 'blood_oxygen') {
      state.type = 'spo2'
    } else if (option.type == 'BMI') {
      state.type = 'bmi'
    } else {
      state.type = option.type
    }
  }
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}

  empi.value = option.empi ? option.empi : userInfo.value.empi
})
onShow(() => {
  waterShow.value = false
  if (
    state.type == 'blood_ketone' ||
    state.type == 'uric_acid' ||
    state.type == 'blood_fat' ||
    state.type == 'liver_function' ||
    state.type == 'blood_sugar'
  ) {
    getNewList()
  } else if (state.type == 'water' || state.type == 'sleep') {
    getWaterSleepList()
  } else {
    getList()
  }
})

watch(
  () => state.inputValue,
  (newVal, oldVal) => {
    if (newVal && newVal.length > 100) {
      state.inputValue = newVal.substring(0, 100)
    }
  },
  {
    immediate: true
  }
)

const typeFun = () => {
  switch (state.type) {
    case 'bmi':
      return 'BMI'
    case 'whr':
      return '腰臀比'
    case 'sbp':
      return '血压'
    case 'heart_rate':
      return '心率'
    case 'fbg':
      return '血糖'
    case 'spo2':
      return '血氧'
    default:
      return ''
  }
}

const typeNewFun = (name: string) => {
  switch (name) {
    case 'blood_ketone_data':
      return '血酮'
    case 'uric_acid_data':
      return '尿酸'
    case 'total_cholesterol':
      return '总胆固醇'
    case 'tg':
      return '甘油三酯'
    case 'hdlc':
      return '高密度脂蛋白'
    case 'ldlc':
      return '低密度脂蛋白'
    case 'got':
      return '谷草转氨酶'
    case 'gpt':
      return '谷丙转氨酶'
    case 'ygt':
      return 'Y谷氨酰转肽酶(Y-GT)'
    default:
      return ''
  }
}
// 获取数据
const getList = () => {
  state.taskList = []
  uni.showLoading({
    title: '加载中'
  })
  const param = {
    empi: empi.value,
    page: state.filtrate.num,
    limit: 10,
    itemList: []
  }
  if (state.type == 'fbg') {
    const obj1 = 'fbg'
    const obj2 = 'pbg'
    param.itemList.push(obj1)
    param.itemList.push(obj2)
  } else {
    param.itemList.push(state.type)
  }
  healthInfoMapList(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        state.taskList = res.data
      } else {
        state.taskList = []
      }
    }
  })
}

const getNewList = () => {
  state.taskList = []
  uni.showLoading({
    title: '加载中'
  })
  const param = {
    empi: userInfo.value.empi,
    indicatorKey: state.type
  }
  getNewDetail(param).then((res: any) => {
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data && res.data.length > 0) {
        const seenDates = new Set()
        state.taskList = res.data.map((item) => {
          const date = item.report.checkTime.split(' ')[0] // 提取日期部分
          if (seenDates.has(date)) {
            // 如果日期已出现，隐藏 checkTime
            return { ...item, report: { ...item.report, checkTime: null } }
          } else {
            // 如果日期未出现，保留 checkTime
            seenDates.add(date)
            return item
          }
        })
      } else {
        state.taskList = []
      }
    }
  })
}

const getWaterSleepList = () => {
  state.taskList = []
  uni.showLoading({
    title: '加载中'
  })
  const param = {
    empi: userInfo.value.empi,
    itemList: [state.type],
    page: 1,
    limit: 10
  }
  getWaterSleepDetail(param).then((res: any) => {
    uni.hideLoading()
    if (res.code == 0) {
      const seenDates = new Set()
      if (res.data && res.data.length > 0) {
        if (state.type == 'sleep') {
          state.taskList = res.data.map((item: any) => {
            const date = item.collectTime.split(' ')[0]
            if (seenDates.has(date)) {
              return {
                ...item,
                collectTime: null,
                paramValue: JSON.parse(item.paramValue)
              }
            } else {
              seenDates.add(date)
              return {
                ...item,
                paramValue: JSON.parse(item.paramValue)
              }
            }
          })
        } else {
          state.taskList = res.data
        }
      } else {
        state.taskList = []
      }
    }
  })
}

const prevent = () => {}
const close = () => {
  waterShow.value = false
}
const sure = () => {
  uni.showLoading({
    title: '加载中'
  })
  const param = {
    id: editWaterData.value.id,
    collectTime: editWaterData.value.collectTime,
    dataSource: editWaterData.value.dataSource,
    paramValue: measurementValue.value.height,
    paramKey: editWaterData.value.paramKey,
    empi: editWaterData.value.empi
  }

  saveNewIndicator(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      if (res.data == true) {
        waterShow.value = false
        abnormalShow.value = true
      } else {
        uni.showToast({
          title: '提交成功',
          icon: 'none',
          duration: 2000
        })
        setTimeout(() => {
          waterShow.value = false
          getWaterSleepList()
        }, 2000)
      }
    }
  })
  // healthInfoUpdate(param).then((res) => {
  //   uni.hideLoading()
  //   if (res.code == 0) {
  //     uni.showToast({
  //       title: '备注成功',
  //       duration: 2000
  //     })
  //     setTimeout(() => {
  //       waterShow.value = false
  //       getList()
  //     }, 2000)
  //   }
  // })
}

const abnormalClose = () => {
  abnormalShow.value = false
  getWaterSleepList()
}

const matchUnit = () => {
  switch (state.type) {
    case 'blood_ketone':
      return 'mmol/L'
    case 'uric_acid':
      return 'umol/L'
    case 'blood_fat':
      return 'mmol/L'
    case 'liver_function':
      return 'U/L'
    default:
      return ''
  }
}

const editWater = (data: any) => {
  editWaterData.value = data
  state.tabkeyboardShow = true
  state.slideRuleShow = false
  state.slideRuleType = ''
  state.slideRuleTypeDefault = false

  setTimeout(() => {
    state.slideRuleShow = true
    waterShowIndex.value += 1
    waterShow.value = true
  }, 10)

  message.value.currentScore = data && data.paramValue ? Math.round(Number(data.paramValue)) : 2000
  measurementValue.value.height =
    data && data.paramValue ? Math.round(Number(data.paramValue)) : 2000
  message.value.maxValue = 4000
  message.value.name = '饮水'
  message.value.unit = 'ml'
}

const measuremenKey = (value) => {
  state.tabkeyboardShow = !state.tabkeyboardShow
  state.slideRuleShow = !state.slideRuleShow
  state.slideRuleType = value
  state.slideRuleTypeDefault = true
  if (Number(measurementValue.value.height) <= 4000) {
    message.value.currentScore = Math.round(Number(measurementValue.value.height))
    measurementValue.value.height = Math.round(Number(measurementValue.value.height))
  } else {
    message.value.currentScore = 4000
    measurementValue.value.height = 4000
  }
}
const childEvent = (param) => {
  measurementValue.value.height = param.currentSwiper
  message.value.currentScore = param.currentSwiper
}

const getSleepTimes = (value: string) => {
  const sleepTimes = value.split('.')
  const hour = Number(sleepTimes[0])
  if (sleepTimes[1]) {
    const minute = Math.round(Number('0.' + sleepTimes[1]) * 60)
    return `${hour}小时${minute > 10 ? minute : '0' + minute}分`
  } else {
    return `${hour}小时`
  }
}
</script>

<style lang="scss" scoped>
.wraps {
  min-height: 100vh;
  padding-bottom: 64rpx;

  .content {
    width: calc(100% - 64rpx);
    margin-left: 32rpx;

    .card {
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0 20rpx;
        font-size: 30rpx;
        color: #222;
      }

      .item {
        padding: 32rpx;
        // margin-top: 30rpx;
        font-size: 32rpx;
        color: #999;
        background: #fff;
        border-radius: 12rpx;

        &:nth-of-type(2) {
          margin-top: 0rpx;
        }

        .top {
          position: relative;
          display: flex;
          align-items: center;

          .name {
            display: inline-block;
            font-weight: 700;
            color: #222;
            vertical-align: middle;
          }

          .postprandial {
            display: inline-block;
            padding: 4rpx 20rpx;
            margin-left: 20rpx;
            font-size: 24rpx;
            color: #666;
            vertical-align: middle;
            background: #f5f5f5;
            border-radius: 20rpx 4rpx;
          }

          .time {
            position: absolute;
            top: 50%;
            right: 0;
            font-size: 14px;
            transform: translateY(-50%);
          }
        }

        .status {
          display: inline-block;
          padding: 2rpx 20rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
          font-weight: 700;
          vertical-align: middle;
          border-radius: 4rpx;

          &.red {
            color: #ff503d;
            background: rgb(255 80 61 / 10%);
          }

          &.yellow {
            color: #ffd666;
            background: rgb(255 214 102 / 10%);
          }

          &.orange {
            color: #ff813c;
            background: rgb(255 129 60 / 10%);
          }

          &.green {
            color: #0cb67c;
            background: rgb(12 182 124 / 10%);
          }
        }

        .min {
          position: relative;
          min-height: 40rpx;
          margin-top: 32rpx;

          .name {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .new-labels {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
            }

            .label {
              font-size: 28rpx;
              font-weight: 400;
              color: #222;
            }

            .num {
              display: inline-block;
              font-size: 40rpx;
              font-weight: 700;
              color: #333;
              vertical-align: middle;
            }

            .unit {
              display: inline-block;
              margin-left: 20rpx;
              font-size: 28rpx;
              vertical-align: middle;
            }

            // &:nth-of-type(2) {
            //   margin-left: 20rpx;
            // }
          }

          .remark {
            position: absolute;
            top: 50%;
            right: 0;
            padding: 6rpx 30rpx;
            font-size: 24rpx;
            color: #00d1b6;
            border: 1px solid #00d1b6;
            border-radius: 24rpx;
            transform: translateY(-50%);
          }
        }

        .bottom {
          // padding-top: 20rpx;
          // margin-top: 32rpx;
          // font-size: 28rpx;
          // color: #222;
          // border-top: 1px solid #e5e6eb;

          .remark {
            display: inline-block;
            vertical-align: top;
          }

          .remarkContent {
            box-sizing: border-box;
            display: inline-block;
            width: calc(100% - 46px);
            font-weight: 400;
            color: #666;
            word-wrap: break-word;
            vertical-align: top;
          }
        }
      }
    }

    .nodate {
      text-align: center;

      .img {
        display: inline-block;
        width: 320rpx;
        height: 240rpx;
        margin-top: 240rpx;
      }

      .nodate_text {
        .name {
          display: block;
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #666;
          text-align: center;
        }
      }
    }
  }

  ::v-deep .u-popup {
    .u-popup__content {
      overflow: hidden;

      .abnormalContent {
        width: 80vw;

        .title {
          padding: 40rpx 32rpx 0;
          font-size: 34rpx;
          font-weight: 700;
          color: #1d2129;
          text-align: center;
        }

        .content {
          display: block;
          padding: 15rpx 32rpx 40rpx;
          font-size: 30rpx;
          color: #4e5969;
          text-align: center;
          border-bottom: 2rpx solid #e5e6eb;
        }

        .know {
          height: 88rpx;
          font-size: 32rpx;
          line-height: 88rpx;
          color: #00d1b6;
          text-align: center;
        }
      }
    }

    .popup-wrap {
      padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(160rpx + env(safe-area-inset-bottom));

      .title {
        padding: 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
        border-bottom: 1rpx solid #e5e6eb;
      }

      .popupContent {
        padding: 32rpx;
        font-size: 30rpx;
        color: #222;
      }

      .tabKey {
        position: relative;
        padding: 20rpx 30rpx 30rpx;

        .name {
          font-size: 30rpx;
          font-weight: 700;
          color: #00d1b6;

          &.on {
            color: #fff;
          }
        }

        .keyboard {
          position: absolute;
          top: 50%;
          right: 30rpx;
          transform: translateY(-50%);

          .img {
            display: inline-block;
            font-size: 36rpx;
            color: #999;
            vertical-align: middle;
            width: 36rpx;
            height: 36rpx;
          }

          .key {
            display: inline-block;
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #222;
            vertical-align: middle;
          }
        }
      }

      .listWraps {
        width: calc(100% - 32rpx);
        height: 118rpx;
        margin: 32rpx 0rpx 0 32rpx;
        // display: flex;
        // flex-direction: row;
        // align-items: center;
        // justify-content: space-between;

        .scroll-view_H {
          width: 100%;
          white-space: nowrap;
        }

        .item {
          display: inline-block;
          // display: flex;
          width: 112rpx;
          height: 110rpx;
          margin-right: 16rpx;
          text-align: center;
          background: #fafafa;
          border-radius: 12rpx;

          // &:nth-last-child(1) {
          //   margin-right: 0;
          // }

          .name {
            display: block;
            width: 100%;
            margin: 10rpx 0 8rpx;
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            text-align: center;

            // &:nth-child(1) {
            //   display: block;
            //   font-size: 20rpx;
            //   font-weight: 700;
            //   color: #333;
            // }
          }

          .time-title {
            display: block;
            width: 100%;
            font-size: 26rpx;
            font-weight: 400;
            color: #666;
            text-align: center;
          }

          &.on {
            background: #00d1b6;

            .name {
              color: #fff;
            }

            .time-title {
              color: #fff;
            }

            // &::after {
            //   position: absolute;
            //   bottom: -8rpx;
            //   left: 50%;
            //   width: 0;
            //   height: 0;
            //   content: '';
            //   border-top: 10rpx solid #00d1b6;
            //   border-right: 10rpx solid transparent;
            //   border-left: 10rpx solid transparent;
            //   transform: translateX(-50%);
            // }
          }
        }
      }

      .btn {
        height: 88rpx;
        margin: 0 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }

      .fixedBtn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 24rpx 0;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        color: #fff;
        text-align: center;
        background: #fff;
        border-top: 1rpx solid #e5e6eb;

        .name {
          display: inline-block;
          width: calc(100% - 60rpx);
          padding: 22rpx 0;
          margin: 0 30rpx;
          font-size: 32rpx;
          background: #00d1b6;
          border-radius: 50rpx;
        }
      }

      .measure {
        display: inline-block;
        width: 100%;
        padding-bottom: 30rpx;
        background: #fff;

        .numWrap {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          margin: 20rpx 30rpx 0;
          text-align: center;
          background: #fafafa;
          border-radius: 4rpx;

          .item {
            display: inline-block;
            // width: 33.3%;
            height: 200rpx;
            padding: 10rpx 0 0rpx;
            margin: 0;
            vertical-align: middle;

            .value {
              display: block;
              width: 100%;
              padding: 20rpx 0 8rpx;
              font-size: 48rpx;
              color: #00d1b6;
              text-align: center;
              background: #fafafa;
              border: 0;
            }

            .wraps {
              padding: 10rpx 0;
              margin: 0 20rpx;
              font-size: 30rpx;
              color: #00d1b6;
              text-align: center;
              border-top: 1rpx solid #00d1b6;

              .name {
                display: inline-block;
                vertical-align: middle;

                &:nth-child(1) {
                  margin-right: 8rpx;
                }
              }
            }
          }
        }
      }

      .measureTime {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 32rpx 0;
        margin: 0 32rpx;

        .name {
          font-size: 30rpx;
          font-weight: 700;
          color: #222;
        }

        .time {
          min-width: 200rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #222;
          text-align: right;

          .titles {
            display: inline-block;
            vertical-align: middle;
          }

          .img {
            display: inline-block;
            width: 30rpx;
            height: 30rpx;
            vertical-align: middle;
          }
        }
      }

      .sleepTime {
        padding: 32rpx;
        margin-bottom: 24rpx;
        background: #fafafa;
        border: 1rpx solid #e5e6eb;
        border-radius: 16rpx;
      }

      .measureDetail {
        margin: 0 32rpx;
        font-size: 26rpx;
        color: #999;

        .item {
          display: block;

          &:nth-child(2) {
            margin-top: 10rpx;
          }
        }
      }

      .content {
        position: relative;

        .contentWrap {
          margin: 0 32rpx;

          .contentItem {
            margin-top: 32rpx;
            font-size: 32rpx;
            color: #222;
          }

          .img {
            display: block;
            width: 100%;
            height: auto;
            margin-top: 30rpx;
          }
        }

        .fixedBtn {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 24rpx 0;
          padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
          padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
          color: #fff;
          text-align: center;
          background: #fff;
          border-top: 1rpx solid #fff;

          p {
            padding: 22rpx 0;
            margin: 0 30rpx;
            font-size: 32rpx;
            background: #02bcc3;
            border-radius: 50rpx;
          }
        }
      }
    }

    .u-popup__content__close {
      top: 40rpx;

      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }

  ::v-deep
    .u-popup
    .u-slide-up-enter-to
    .u-picker
    .u-picker__view__column
    .u-picker__view__column__item {
    line-height: 34px !important;
  }

  ::v-deep .u-popup .u-slide-up-enter-active {
    overflow: hidden;
    border-top-left-radius: 32rpx !important;
    border-top-right-radius: 32rpx !important;

    .u-toolbar {
      .u-toolbar__wrapper__confirm {
        color: #00d1b6 !important;
      }
    }
  }

  ::v-deep .u-popup .u-slide-up-enter-to .u-picker .u-picker__view {
    height: 400px !important;
  }

  ::v-deep .u-safe-area-inset-bottom {
    padding-bottom: 0 !important;
  }
}

.food-type {
  display: inline-block;
  padding: 4rpx 20rpx 2rpx;
  margin-left: 16rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #666;
  background: #f5f5f5;
  border-radius: 20rpx 4rpx;
}

.source {
  font-size: 26rpx;
  color: #999;
}
</style>
